<template>
	<view class="contain qxlj_back4">
		<!-- 商品banner -->
		<view class="carousel-section">
			<swiper class="carousel" @change="handleChange" circular indicator-color="rgba(1, 1, 1, .3)"
				indicator-active-color="#fff">
				<swiper-item class="swiper-item" v-for="(item,index) in detail.imgArr" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill" @click="previewImg(item)">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息 -->
		<view class="shop_box">
			<!-- 名称or价格 -->
			<view class="shop_back" v-if="goodsType==11 || goodsType == 16">
				<view class="shop_name">
					<view class="shop_name_flex">
						<view class="">
							<view class="name">{{detail.Name}}</view>
							<view class="name_note" v-if="detail.Subtitle!=null">{{detail.Subtitle}}</view>
						</view>
						<view class="border_shop qxlj_back3">
							<!-- <view class="text"></view> -->
							<view class="text_date">15 <text style="font-weight: normal;font-size: 14px;">min</text>
							</view>
							<view class="text">排队</view>
						</view>
					</view>
					<view class="open-time ptb30">
						<view class="one">开放时间</view>
						<view class="two three">{{detail.BusinessModel.BusinessHours}}</view>
					</view>
					<view class="location ptb30">
						<view class="one">景区地点</view>
						<view class="two" @click="goPark">{{detail.BusinessModel.Address}}</view>
					</view>
				</view>
			</view>

			<!-- 			<view class="shop_back shop_cpxq" style="margin-top: -50rpx;" v-if="goodsType==2">
				<view class="shop_name shopTypeBox">
					<view class="">
						<view class="name">{{detail.Name}}</view>
						<view class="goods-price">
							<text class="symbol">¥</text>
							<text class="price">{{detail.ShowPrice}}</text>
							<text class="oldPrice">{{detail.MarketPrice}}</text>
						</view>
					</view>
					<view class="share_box" @click="">
						<image src="/static/yqimg/share.png" mode=""></image>
						<button id="share" class="f30"
							style="color: #000;font-size: 24rpx;background: none;border:none;padding:0;margin-top: -13px;"
							open-type="share">分享</button>
					</view>
				</view>
			</view> -->

			<!-- 			<view class="shop_back person_box" v-if="goodsType==2" @click="goEvtion">
				<view class="shop_name">
					<view class="">
						<view class="">用户评价（{{detail.EvaluationCount}}）</view>
					</view>
					<view class="ck_all">查看全部</view>
				</view>
			</view> -->

			<!-- 信息 -->
			<!-- 			<view class="shop_back shop_top" v-if="goodsType==11 || goodsType == 16">
				<view class="shop_phone shop_name">
					<view class="">
						<view class="name_one">{{detail.Name}}</view>
						<view class="name_note" v-if="detail.Subtitle!=null">{{detail.Subtitle}}</view>
					</view>
					<view class="shop_left">
						<view class="img_box" @click="goPark">
							<image src="/static/qxlj/dt.png" mode=""></image>
							<view class="text">{{detail.Distance}}</view>
						</view>
						<view class="border"></view>
						<view class="img_box" @click="goPhone">
							<image src="/static/qxlj/dh.png" mode=""></image>
							<view class="text">电话</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 门票及简介 -->
			<view class="shop_back shop_top shop_mp" v-if="detail.Substance!=null">
				<view class="" v-if="goodsType==11">
					<view class="title">简介</view>
					<mp-html style="background-color: #fff;" :content="detail.Substance" />
				</view>
				<view class="" v-if="goodsType==16">
					<view class="title huodong_box">项目介绍</view>
					<mp-html style="background-color: #fff;" :content="detail.Substance" />
				</view>
				<view class="" v-if="goodsType==2">
					<view class="title huodong_box">产品介绍</view>
					<mp-html style="background-color: #fff;" :content="detail.Substance" />
				</view>
			</view>

			<view class="shop_back shop_top shop_mp" v-if="detail.BookingNotice!=null">
				<view class="" v-if="goodsType==16">
					<view class="title huodong_box">预定需知</view>
					<mp-html style="background-color: #fff;" :content="detail.BookingNotice" />
				</view>
			</view>

			<view class="bottom_box">
				<!-- 				<view class="bottom_icon" @click="goIndex" style="margin-left: 2%;" v-if="goodsType==11||goodsType==16">
					<image src="/static/wyg-bottom-tab/static/icon_04_f.png" mode=""></image>
					<view class="">首页</view>
				</view>
				<view class="bottom_icon" @click="handleCollection">
					<uni-icons v-if="isCollection" type="star-filled" size="20" color="#498FFF !important"></uni-icons>
					<uni-icons v-else color="gray" type="star" size="20"></uni-icons>
					<view v-if="isCollection" class="" :class="{'collection':isCollection}">已收藏</view>
					<view v-else class="" :class="{'collection':isCollection}">收藏</view>
				</view>
				<view class="shop_car bottom_icon" v-if="goodsType==2" @click="goShopCar">
					<image src="../../static/images/icon105.png" mode=""></image>
					<view class="">购物车<text class="car_num">{{shopCarNum}}</text></view>
				</view> -->
				<view class="btn_box" @click="goCreat" v-if="goodsType==11 || goodsType == 16">
					<!-- <view class="one">加入购物车</view> -->
					<view class="two" v-if="goodsType==11">预约</view>
					<view class="two" v-if="goodsType==16">立即购票</view>
				</view>

				<view class="btn_box btn_shop" @click="" v-if="goodsType==2">
					<view class="one" @click="buttonClick(0)">加入购物车</view>
					<view class="two" @click="buttonClick(1)">立即购买</view>
				</view>
			</view>
		</view>
		<spec-popuo ref="refspec" :goodsDetail="detail" @buy="handleBuy" @addCar="handleAddCar"></spec-popuo>
	</view>
</template>

<script>
	import specPopuo from '../components/spec-popup.vue'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getGoodsDetail,
		addProductCollection,
		cancelProductCollection,
		checkProductCollection,
		addProductCar,
		getUserProductCarItemNum,
	} from '@/api/mall.js'
	import {
		floatMul
	} from '@/utils/tools.js'
	export default {
		components: {
			specPopuo,
		},
		data() {
			return {
				detail: {
					imgArr: [],
				},
				goodsId: 0, //商品ID
				current: 0, //banner下标
				isCollection: false, //是否收藏
				goodsType: 0,
				shopCarNum: 0,
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
		},
		onLoad(e) {
			const _this = this
			console.log(e)
			if (e.id) {
				// 商品id
				this.goodsId = e.id
				this.goodsType = e.type
				// 加载数据
				this.lodaData();
				this.getUserCollectionType();
			} else {

			}
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShow() {
			this.getCartListNumber();
		},
		methods: {
			//导航去
			goPark() {
				if (this.detail.BusinessModel.LatitudeAndLongitude != null) {
					uni.openLocation({
						latitude: parseFloat(this.detail.BusinessModel.LatitudeAndLongitude.split(',')[0]),
						longitude: parseFloat(this.detail.BusinessModel.LatitudeAndLongitude.split(',')[1]),
						success: function(res) {
							console.log('打开系统位置地图成功')
						},
						fail: function(error) {
							console.log(error)
						}
					})
				}
			},
			//计算距离
			getSelfLocation() {
				let location = {
					lat: 0, //维度
					lng: 0, //经度
				}
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02', // 使用国标坐标系
						isHighAccuracy: true, // 高精度定位，会调用gps获取高精度坐标
						success(res) {
							location.lat = res.latitude
							location.lng = res.longitude,
								resolve(location);
						},
						fail(err) {
							console.log(err)
							reject(location);
						}
					})
				})
			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			async GetDistance(lat1, lng1) {
				uni.showLoading({});
				const res = await this.getSelfLocation()
				let lat2 = res.lat; //维度
				let lng2 = res.lng; //经度
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				let newJL = s.toFixed(2);
				uni.hideLoading();
				return newJL;
			},
			buttonClick(e) {
				this.$refs.refspec.show(e)
			},
			// 获取购物车数量
			async getCartListNumber() {
				try {
					const {
						Data
					} = await getUserProductCarItemNum()
					console.log("data", Data)
					this.shopCarNum = Data;
					this.options[1].info = Data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 处理立即购买
			handleBuy(data) {
				console.log(data)
				const GoodsInfoList = [{
					BusinessId: this.detail.BusinessId,
					BusinessName: this.detail.BusinessModel.CompanyName || this.detail.Name,
					OrderRemak: '',
					goodsAmount: floatMul(data.number * 1, data.Price),
					ProductInfo: [{
						Num: data.number,
						...data
					}],
					glist: [{
						Num: data.number,
						...data
					}]
				}]
				this.$refs.refspec.hide()
				this.setGoodsInfoList(GoodsInfoList)
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order?id=' + this.detail.BusinessId
				})
			},
			// 处理添加购物车
			async handleAddCar(item) {
				console.log(item)
				try {
					await addProductCar({
						"BusinessId": this.detail.BusinessId,
						"ProductId": item.ProductId,
						"ProductSpecId": item.ProductSpecId,
						"Num": item.number
					})
					this.$refs.refspec.hide()
					this.getCartListNumber()
				} catch (e) {
					//TODO handle the exception
				}
			},
			previewImg(e) { //图片预览
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//跳转购物车
			goShopCar() {
				uni.navigateTo({
					url: '/mall_subpages/cart/cart'
				})
			},
			//进入评论列表
			goEvtion() {
				uni.navigateTo({
					url: `/mall_subpages/evaluation/evaluation-list?Id=${this.detail.Id}`
				})
			},
			...mapMutations(['setGoodsInfo', 'setGoodsInfoList']),
			//预约
			goCreat() {
				this.setGoodsInfo({
					...this.detail,
					Type: this.detail.Type
				})
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order-online'
				})
			},
			// 获取用户收藏状态
			async getUserCollectionType() {
				try {
					const {
						Data
					} = await checkProductCollection({
						Id: this.goodsId
					})
					this.isCollection = Data
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 处理收藏点击
			async handleCollection() {
				try {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					if (this.isCollection) {
						await cancelProductCollection({
							Id: this.goodsId,
							CollectionType: 11
						})
						this.isCollection = false
						this.$api.msg('取消成功', 1500, false, 'success')
					} else {
						await addProductCollection({
							Id: this.goodsId
						})
						this.isCollection = true
						this.$api.msg('收藏成功', 1500, false, 'success')
					}
					// uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},
			//拨打商家电话
			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.BusinessModel.Mobile,
					success: (result) => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//回到首页
			goIndex() {
				uni.redirectTo({
					url: '/pages/center/index'
				})
			},
			async lodaData() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					const {
						Data
					} = await getGoodsDetail({
						Id: this.goodsId
					})
					Data.imgArr = Data.ImgList ? Data.ImgList.split('|') : [];
					Data.imgArr.unshift(Data.Img);
					if (Data.BusinessModel.LatitudeAndLongitude != null) {
						let JL = await this.GetDistance(Data.BusinessModel.LatitudeAndLongitude.split(',')[0], Data
							.BusinessModel.LatitudeAndLongitude.split(',')[1]);
						if (JL < 1) {
							Data.Distance = JL * 1000 + 'M'
						} else {
							Data.Distance = JL + 'KM'
						}
					} else {
						Data.Distance = '未知'
					}
					this.detail = Data;
					console.log('detail', this.detail)
					if (this.goodsType == 2) {
						this.$nextTick(() => {
							this.$refs.refspec.loadData()
						})
					}
					uni.setNavigationBarTitle({
						title: Data.Name
					})
					uni.hideLoading()
				} catch (e) {
					console.log(e)
				}
			},
			// 商品banner改变
			handleChange(e) {
				this.current = e.detail.current
			},
		},
	}
</script>

<style scoped lang="scss">
	.carousel-section {
		// position: relative;
		height: 500rpx;
		background-color: #e9e9e9;

		/* 轮播图 */
		/deep/ .uni-swiper-dot {
			width: 20rpx;
			height: 10rpx;
			border-radius: 50rpx;
		}
	}

	.carousel-section /deep/ .uni-swiper-dots-horizontal {
		bottom: 30rpx;

		.uni-swiper-dot {}

		.uni-swiper-dot-active {
			background-color: #e07b2b !important;
		}
	}

	.carousel {
		// position: relative;
		// left: 10%;
		// bottom: -10%;
		width: 100%;
		height: 500rpx;
		box-shadow: 0 0 20rpx #b4b4b4;
		z-index: 9;

		.swiper-item {}
	}

	.dot-desc {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		background: rgba(#333, 0.3);
		padding: 4rpx 16rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: $uni-font-size-sm - 4rpx;
	}

	.image-wrapper {
		height: 100%;
		width: 100%;
		background: #ccc;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shop_box {
		position: relative;
		padding-bottom: 55px;
		// padding-bottom: env(safe-area-inset-bottom);

		.shop_back {
			background-color: #fff;
		}

		.shop_name {
			width: 100%;

			.shop_name_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 2% 6%;
				border-bottom: .5px solid #CCCCCC;
				height: 90px;
			}

			.name {
				font-weight: bold;
				color: #000;
				font-size: 18px;
			}

			.name_note {
				font-size: 12px;
				color: #ccc;
				margin-top: 2%;
			}

			.share_box {
				text-align: center;

				image {
					width: 20px;
					height: 20px;
				}

				view {
					font-size: 14px;
				}
			}

			.border_shop {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.text {
					font-size: 12px;
				}

				.text_date {
					font-weight: bold;
					font-size: 16px;
				}
			}

			.open-time {
				border-bottom: .5px solid #CCCCCC;
			}

			.open-time,
			.location {
				font-size: 14px;
				color: #555555;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 2% 6%;
				height: 50px;


				.one {
					color: #000;
				}

				.two {
					color: #555555;
					display: flex;
					align-items: center;
				}

				.two::after {
					content: " ";
					display: inline-block;
					height: 8px;
					width: 8px;
					border-width: 1px 1px 0 0;
					border-color: #CCCCCC;
					border-style: solid;
					-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				}

				.three::after {
					display: none;
				}
			}

		}

		.shop_top {
			border-radius: 7px;
			background-color: #fff;
		}

		.shop_phone {
			width: 96%;
			margin-top: 4%;
			padding: 2%;

			.name_one {
				color: #000;
				font-size: 16px;
			}

			.name_note {
				font-size: 12px;
				color: #ccc;
				margin-top: 2%;
			}

			.shop_left {
				width: 35%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #ccc;

				.border {
					width: .5px;
					height: 35px;
					background-color: #ccc;
				}

				.img_box {
					text-align: center;
				}

				image {
					width: 20px;
					height: 20px;
				}

				.text {
					font-size: 14px;
				}
			}
		}

	}

	.shop_mp {
		margin-top: 4%;
		padding: 2% 6%;

		.title {
			width: 100%;
			text-align: left;
			margin-bottom: 2%;
			font-weight: bold;
		}
	}

	.bottom_box {
		width: 100%;
		// height: 60px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 0 2%;
		font-size: 14px;
		text-align: center;

		image {
			width: 20px;
			height: 20px;
		}

		.btn_box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(90deg, #80B4FF, #6699FF);

			view {
				width: 100%;
				font-size: 18px;
				height: 45px;
				line-height: 45px;
				border-radius: 100px;
				text-align: center;
			}

			.one {
				background-color: rgb(218, 241, 243);
				color: #498FFF;
			}

			.two {
				color: #fff;
				// background-color: #498FFF;
			}
		}

		.btn_shop {
			width: 68%;

			view {
				width: 48%;
			}
		}
	}

	#share::after {
		border: none !important;
		height: 0 !important;
	}

	.collection {
		color: #498FFF;
	}

	//线上产品
	.shop_cpxq {
		.name {
			font-weight: normal;
		}

		.symbol {
			font-size: $uni-font-size-sm + 10rpx;
			color: #498FFF;
		}

		.price {
			color: #498FFF;
			font-size: 46rpx;
			font-weight: 600;
		}

		.oldPrice {
			font-size: $uni-font-size-sm;
			padding-left: 10rpx;
			color: #999;
			text-decoration: line-through;
		}
	}

	.person_box {
		height: 140rpx;
		margin-top: 4%;

		.shop_name {
			height: 140rpx;
			position: relative;

			.ck_all {
				margin-right: 2%;
			}
		}

		.shop_name::after {
			content: " ";
			display: inline-block;
			height: 8px;
			width: 8px;
			border-width: 2px 2px 0 0;
			border-color: rgb(149, 155, 167);
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			position: absolute;
			right: 0px;
		}
	}

	.shop_car {
		position: relative;

		.car_num {
			background-color: red;
			color: #fff;
			width: 16px;
			height: 16px;
			line-height: 16px;
			position: absolute;
			top: -6px;
			right: 0;
			border-radius: 50%;
		}
	}

	.bottom_icon {
		margin-top: 2%;
	}

	.shopTypeBox {
		height: 160rpx !important;
	}
</style>